import React, { Component, Suspense } from 'react'
import { Route, BrowserRouter as Router, Switch, Link, Redirect } from 'react-router-dom'
import routes from './router'
import Loading from './components/loading'
import './styles/index.css'
export default class App extends Component{
  render() {
    return (
      <div>
        <div>welcome learn react and redux</div>
        <div className="page">
          <Router>
            <div className="menu">
              {
                routes.map(item => {
                  return (
                    <div key={item.path}>
                      <Link to={item.path}>{item.name}</Link>
                    </div>
                  )
                })
              }
            </div>
            <div className="content">
              <Suspense fallback={<Loading />}>
                <Switch>
                  {
                    routes.map(item => <Route key={item.path} path={item.path} component={item.component}></Route>)
                  }
                </Switch>
              </Suspense>
            </div>
            <Redirect to="/context"></Redirect>
          </Router>
        </div>
      </div>
    )
  }
}